<template>
  <div class="app-container">
    <common-table
      :has-modify="false"
      :colnames="colnames"
      :list-data="listData"
      :list-loading="listLoading"
      :is-multiple="isMultiSelect"
      :custom-buttons="customButtons"
      :buttons="[{ name: '新建价牌' }]"
      @fetchData="fetchData"
      @itemNew="itemNew"
      @itemEdit="itemEdit"
      @itemDelete="itemDelete"
      @onCustomButtonClick="onCustomButtonClick"
    >
      <template v-slot:filter>
        <!-- <el-button size="mini" type="default" @click="downloadTemplate()">下载模板</el-button>
          <el-button size="mini" type="primary" style="margin-right:80px;" @click="importData()">批量导入</el-button> -->
        <el-input
          v-model="listQuery.priceType"
          placeholder="请选择价格模型"
          clearable
          class="etag"
          size="mini"
        />
        <el-input
          v-model="listQuery.templateType"
          placeholder="请选择模板类型"
          clearable
          class="etag"
          size="mini"
        />
        <el-button
          type="primary"
          size="mini"
          class="ml5"
          @click="fetchData(listQuery)"
          >查询</el-button
        >
        <el-button
          type="default"
          size="mini"
          class="ml5"
          @click="exportData(listQuery)"
          >导出</el-button
        >
      </template>
    </common-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      destroy-on-close
    >
      <price-edit
        :values="editValues"
        :readonly="!hasModify"
        @onCancel="dialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>
  </div>
</template>

<style scoped>
.etag {
  width: 220px;
  margin-right: 5px;
}
</style>

<script>
import { mapGetters } from "vuex";
import CommonTable from "../commontable";
import PriceEdit from "./edit";
import { getPriceList, delPrice, addPrice, putPrice } from "@/api/price";
import apiDefines from "../commontable/apidefines";
import { batchDel } from "@/utils";

export default {
  name: "Price",
  components: { CommonTable, PriceEdit },
  data() {
    return {
      customButtons: [
        // { name: '峰谷价', type: 'primary', data: { priceType: 2 }},
        // { name: '查看引用', type: 'default', isMultiSelect: false, data: {}}
      ],
      colnames: [
        {
          displayName: "序号",
          colName: "id",
          dataType: "indexNo",
          colWidth: "64px",
        },
        { displayName: "价格编号", colName: "priceId", colWidth: "100px" },
        { displayName: "价格类型", colName: "typeName", colWidth: "100px" },
        {
          displayName: "模板类型",
          colName: "templateType",
          colWidth: "100px",
          formater: (val, row) => {
            return row.templateType === 1 ? "标准" : "自定义";
          },
        },
        {
          displayName: "模板图片",
          colName: "fileUrl",
          dataType: "image",
          colWidth: "120px",
        },
        {
          displayName: "一口价充电费",
          colName: "chargePrice",
          colWidth: "100px",
        },
        // { displayName: '电费', colName: 'electricity', colWidth: '100px' },
        {
          displayName: "时段说明1",
          colName: "desc1",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段1", colName: "period1", colWidth: "100px" },
        {
          displayName: "价格1",
          colName: "price1",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "时段说明2",
          colName: "desc2",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段2", colName: "period2", colWidth: "100px" },
        {
          displayName: "价格2",
          colName: "price2",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "时段说明3",
          colName: "desc3",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段3", colName: "period3", colWidth: "100px" },
        {
          displayName: "价格3",
          colName: "price3",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "时段说明4",
          colName: "desc4",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段4", colName: "period4", colWidth: "100px" },
        {
          displayName: "价格4",
          colName: "price4",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "时段说明5",
          colName: "desc5",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段5", colName: "period5", colWidth: "100px" },
        {
          displayName: "价格5",
          colName: "price5",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "时段说明6",
          colName: "desc6",
          hidden: true,
          colWidth: "120px",
        },
        { displayName: "时段6", colName: "period6", colWidth: "100px" },
        {
          displayName: "价格6",
          colName: "price6",
          dataType: "number",
          colWidth: "100px",
        },
        {
          displayName: "超时充电费",
          colName: "overtimePrice",
          colWidth: "120px",
        },
        {
          displayName: "操作",
          dataType: "oprators",
          colWidth: "120px",
          data: {
            ops: [
              { name: "编辑", click: "itemUpdate" },
              { name: "删除", click: "itemDelete" },
            ],
          },
        },
      ],
      editCols: {},
      editType: "edit",
      editValues: {},
      listData: {},
      editRules: {},
      listLoading: false,
      isMultiSelect: true,
      dialogVisible: false,
      dialogTitle: "新建",
      stationName: "全部价格牌模板",
      listQuery: {},
      hasModify: false,
    };
  },
  computed: {
    ...mapGetters(["user", "name", "avatar", "roles"]),
  },
  created() {
    this.editCols = apiDefines.price.editCols;
    this.editRules = apiDefines.price.editRules;
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.params.stationName) {
        this.stationName = this.$route.params.stationName + " 车位";
      }
    });
  },
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery;
      console.log("fetchData", listQuery);
      this.listLoading = true;
      getPriceList(listQuery, this.$route.params.stationId)
        .then((ret) => {
          console.log("ret", ret);
          this.listData = ret.data;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    itemNew() {
      console.log("price New");
      this.editType = "add";
      this.dialogTitle = "新建一口价";
      this.editValues = { priceType: 1, templateType: 1, templateStyle: 4 };
      this.dialogVisible = true;
      this.hasModify = true;
    },
    itemEdit({ type, item, items }) {
      console.log("itemEdit");
      this.editType = "edit";
      this.editValues = item;
      this.dialogTitle = "修改";
      this.dialogVisible = true;
      this.hasModify = false;
    },
    itemDelete({ type, item, items }) {
      console.log("itemDelete");
      if (type === "one") {
        delPrice({ priceId: item.id }).then((ret) => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.fetchData(this.listQuery);
        });
      } else if (type === "multi") {
        batchDel(delPrice, items, { idname: "priceId", idvalue: "id" }).then(
          (ret) => {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.fetchData(this.listQuery);
          }
        );
      }
    },
    onSubmit(formData) {
      console.log("onSubmit", formData);
      if (this.editType === "add") {
        // 新建
        // if (formData.priceType == 10) {
          formData.price1 = formData.unit1
            ? parseFloat(
                (
                  parseFloat(formData.unit1) + parseFloat(formData.service1)
                ).toFixed(2)
              )
            : null;
          formData.price2 = formData.unit2
            ? parseFloat(
                (
                  parseFloat(formData.unit2) + parseFloat(formData.service2)
                ).toFixed(2)
              )
            : null;
          formData.price3 = formData.unit3
            ? parseFloat(
                (
                  parseFloat(formData.unit3) + parseFloat(formData.service3)
                ).toFixed(2)
              )
            : null;
          formData.price4 = formData.unit4
            ? parseFloat(
                (
                  parseFloat(formData.unit4) + parseFloat(formData.service4)
                ).toFixed(2)
              )
            : null;
          formData.price5 = formData.unit5
            ? parseFloat(
                (
                  parseFloat(formData.unit5) + parseFloat(formData.service5)
                ).toFixed(2)
              )
            : null;
          formData.price6 = formData.unit6
            ? parseFloat(
                (
                  parseFloat(formData.unit6) + parseFloat(formData.service6)
                ).toFixed(2)
              )
            : null;
          formData.price7 = formData.unit7
            ? parseFloat(
                (
                  parseFloat(formData.unit7) + parseFloat(formData.service7)
                ).toFixed(2)
              )
            : null;
          formData.price8 = formData.unit8
            ? parseFloat(
                (
                  parseFloat(formData.unit8) + parseFloat(formData.service8)
                ).toFixed(2)
              )
            : null;
          formData.price9 = formData.unit9
            ? parseFloat(
                (
                  parseFloat(formData.unit9) + parseFloat(formData.service9)
                ).toFixed(2)
              )
            : null;
          formData.price10 = formData.unit10
            ? parseFloat(
                (
                  parseFloat(formData.unit10) + parseFloat(formData.service10)
                ).toFixed(2)
              )
            : null;
          formData.price11 = formData.unit11
            ? parseFloat(
                (
                  parseFloat(formData.unit11) + parseFloat(formData.service11)
                ).toFixed(2)
              )
            : null;
          formData.price12 = formData.unit12
            ? parseFloat(
                (
                  parseFloat(formData.unit12) + parseFloat(formData.service12)
                ).toFixed(2)
              )
            : null;
        // }
        // console.log()
        addPrice(formData).then((ret) => {
          console.log("add ret", ret);
          this.$message({
            type: "success",
            message: "添加成功！",
          });
          this.dialogVisible = false;
          this.fetchData(this.listQuery);
        });
      } else if (this.hasModify) {
        // 修改
        // if (formData.priceType == 10) {
          formData.price1 = formData.unit1
            ? parseFloat(
                (
                  parseFloat(formData.unit1) + parseFloat(formData.service1)
                ).toFixed(2)
              )
            : null;
          formData.price2 = formData.unit2
            ? parseFloat(
                (
                  parseFloat(formData.unit2) + parseFloat(formData.service2)
                ).toFixed(2)
              )
            : null;
          formData.price3 = formData.unit3
            ? parseFloat(
                (
                  parseFloat(formData.unit3) + parseFloat(formData.service3)
                ).toFixed(2)
              )
            : null;
          formData.price4 = formData.unit4
            ? parseFloat(
                (
                  parseFloat(formData.unit4) + parseFloat(formData.service4)
                ).toFixed(2)
              )
            : null;
          formData.price5 = formData.unit5
            ? parseFloat(
                (
                  parseFloat(formData.unit5) + parseFloat(formData.service5)
                ).toFixed(2)
              )
            : null;
          formData.price6 = formData.unit6
            ? parseFloat(
                (
                  parseFloat(formData.unit6) + parseFloat(formData.service6)
                ).toFixed(2)
              )
            : null;
          formData.price7 = formData.unit7
            ? parseFloat(
                (
                  parseFloat(formData.unit7) + parseFloat(formData.service7)
                ).toFixed(2)
              )
            : null;
          formData.price8 = formData.unit8
            ? parseFloat(
                (
                  parseFloat(formData.unit8) + parseFloat(formData.service8)
                ).toFixed(2)
              )
            : null;
          formData.price9 = formData.unit9
            ? parseFloat(
                (
                  parseFloat(formData.unit9) + parseFloat(formData.service9)
                ).toFixed(2)
              )
            : null;
          formData.price10 = formData.unit10
            ? parseFloat(
                (
                  parseFloat(formData.unit10) + parseFloat(formData.service10)
                ).toFixed(2)
              )
            : null;
          formData.price11 = formData.unit11
            ? parseFloat(
                (
                  parseFloat(formData.unit11) + parseFloat(formData.service11)
                ).toFixed(2)
              )
            : null;
          formData.price12 = formData.unit12
            ? parseFloat(
                (
                  parseFloat(formData.unit12) + parseFloat(formData.service12)
                ).toFixed(2)
              )
            : null;
        // }
        putPrice(formData).then((ret) => {
          console.log("edit ret", ret);
          this.$message({
            type: "success",
            message: "修改成功！",
          });
          this.dialogVisible = false;
          this.fetchData(this.listQuery);
        });
      } else {
        this.dialogVisible = false;
      }
    },
    onCustomButtonClick({ target, data }) {
      if (target.name === "峰谷价") {
        this.editType = "add";
        this.dialogTitle = "新建峰谷价";
        this.editValues = target.data;
        this.dialogVisible = true;
        this.hasModify = true;
      } else if (target.name === "查看引用") {
        // console.log('查看引用', data)
        this.$router.push({
          name: "Etag",
          params: {
            query: {
              queryType: 1, // 0，false）：根据所传列名和数值模糊查询；（1，true): 精确查询
              query: `${data.item.id}`, // 搜索内容
              queryColumn: "templateId", // 搜索列名，即字段名，如：devName, stationName等
              order: "ascending", // 排序，取值：ascending/descending/none(不传Order参数)
              column: "templateId", // 排序列名，即字段名，如：devName, stationName等
              curPage: 1, // 当前页
              pageSize: 20, // 页大小
            },
          },
        });
      }
    },
    exportData(listQuery) {
      this.$message({
        type: "warning",
        message: "缺少接口",
      });
    },
  },
};
</script>
